import * as React from 'react';
//ui
import styles from './style.module.scss'
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';

export interface WordTagIndexProps extends React.HTMLAttributes<HTMLDivElement> {
    word: string 
    value: string
    onEdit: () => void
    onRemove: () => void
    onWordClick: (word: string) => void
}

const WordRelationIndex: React.SFC<WordTagIndexProps> = props => {
    const { word, value, onEdit, onRemove, onWordClick } = props
    return (
        <div className={styles.main} style={props.style}>
            <div className={styles.word} onClick={() => onWordClick(word)}>
                {word}
            </div>
            <div className={styles.value}>
                {value}
            </div>
            <div className={styles.edit} onClick={onEdit}>
                <EditOutlined className={styles.icon} />
            </div>
            <div className={styles.remove} onClick={onRemove}>
                <DeleteOutlined className={styles.icon} />
            </div>
        </div>
    )
}

export default WordRelationIndex